<template>
 <div>
       <h2>物流相关信息</h2>
      <div class="logistics-info-header">
        <div class="logistics-info-header-left">
          <div class="logistics-status blue"  :style="{color: yanse}">{{ziti}}</div>
          <div class="logistics-company" @click="fn">顺丰速运</div>
          <div class="logistics-no">SF123456789</div>
        </div>
      </div>
      <ul class="logistics-info-list">
        <li v-for="item in logisticsInfo" :key="item.time">
          <div class="logistics-info-list-time">{{item.time}}</div>
          <div class="logistics-info-list-content">{{item.content}}</div>
        </li>
      </ul>
      <button v-inder="orderInfo.role" >查看物流详情</button>
 </div>
</template>

<script>
 export default {
   name: 'HmDingdan',
   props: {
    logisticsInfo:{
        type:Array,
        required:true
    },
    orderInfo:{
        type:Object,
        required:true 
    }
   },
  
   data () {
     return {

     }
   },
   methods:{
    fn(){
        this.$refs.weifahuo.style.color="red"
    },
   },
    computed: {
    yanse(){
       if(this.orderInfo.logisticsStatus===0){
          return  'red'
       }else if(this.orderInfo.logisticsStatus===1){
         return  'green'
       }else if(this.orderInfo.logisticsStatus===2){
         return 'blue'
       }else{
         return 'pink'
       }
    },
      ziti(){
       if(this.orderInfo.logisticsStatus===0){
          return  '未发货'
       }else if(this.orderInfo.logisticsStatus===1){
         return  '已发货'
       }else if(this.orderInfo.logisticsStatus===2){
         return ' 已签收'
       }else{
         return '未签收'
       }
    }
  },
  directives:{
    inder:{
     inserted(el,binding){
      const red= ['admin','zhangsan','lisi'].includes(binding.value)
        el.disabled=!red
     }  
    }
  }
  
 }
</script>

<style scoped lang='less'>

</style>